<style lang="sass" scoped>
        .img{
        width:120px;
    }
</style>
<template>
    <div v-jurdie="'book2100'" class="container">
        <div class="search-cont">
            <el-input placeholder="请搜索" v-model.trim="search.keyWord">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-select v-model="search.categId" placeholder="请选择类目">
                <el-option v-for="item in categlist" :key="item.categId" :label="item.categName" :value="item.categId">
                </el-option>
            </el-select>
            <el-button @click="getList()" type="primary" :plain="false">搜索</el-button>
            <el-button v-jurdie="'book2101'" @click="routerGo('item_add')" type="primary" :plain="false">新增</el-button>
        </div>
        <div class="tabs-cont">
            <el-button
                @click="search.status=''" 
                :type="search.status===''?'primary':''">全部</el-button>
            <el-button
                @click="search.status=0" 
                :type="search.status===0?'primary':''">待上架</el-button>
            <el-button
                @click="search.status=1" 
                :type="search.status===1?'primary':''">已上架</el-button>
        </div>
        <div class="table-cont">
            <el-table :data="list" style="width: 100%">
                <el-table-column label="商品图片">
                    <template slot-scope="props">
                        <img class="img" v-if="props.row.mainImageUrl" :src="props.row.mainImageUrl">
                    </template>
                </el-table-column>
                <el-table-column prop="itemCode" label="商品编码">
                </el-table-column>
                <el-table-column prop="itemName" label="商品名称">
                </el-table-column>
                <el-table-column label="类目">
                    <template slot-scope="props">
                        <el-tag v-for="(item,i) in props.row.categNameList" size="small" class="mb10">{{item}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="售价">
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="props">{{props.row.status | status}}</template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间">
                </el-table-column>
                <el-table-column width="260" label="操作">
                    <template slot-scope="props">
                        <el-button v-jurdie="'book2102'" @click="routerGo('item_add',{itemCode:props.row.itemCode})" type="primary" :plain="false" size="small">修改</el-button>
                        <el-button v-jurdie="'book2103'"
                            @click="modifyStatus(props.row)"
                            v-if="props.row.status===0" type="primary" :plain="false" size="small">上架</el-button>
                        <el-button v-jurdie="'book2104'"
                            @click="modifyStatus(props.row)"
                            v-else type="primary" :plain="false" size="small">下架</el-button>
                        <el-button v-jurdie="'book2105'" @click="deleteItem(props.row)" type="primary" :plain="false" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="total, prev, pager, next" :total="search.total" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    export default {
        components: {
        },
        data() {
            return {
                //列表搜索参数
                search:{
                    keyWord:'', //	是	string	搜索关键字
                    status:'', //	是	string	状态，0-未上架，1-已上架
                    categId:'', //	是	string	类目ID
                    pageNo:1, //	是	string	页码
                    pageSize:config.pageSize, //	是	string	当前页显示的条数
                    total:0,
                },
                list:[],
                selectValue:'',
                categlist:[]
            };
        },
        watch:{
            'search.status'(val){
                this.getList();
            }
        },
        created(){
            server.getCategList().then(res=>{
                this.categlist = res;
            })
        },
        mounted() {
            this.$nextTick(() => {
                this.getList();
            });
        },
        methods: {
            handleCurrentChange(val) {
                this.search.pageNo = val;
                this.getList();
            },
            getList() {
                let param = JSON.parse(JSON.stringify(this.search));
                util.ajax({
                    url: config.baseApi + "bookMall-admin/api/item/getItemListPage",
                    data: param,
                    success: data => {
                        this.list = data.data.record;
                        this.search.total = data.data.totalNum;
                    }
                });
            },
            modifyStatus(item){
                let content = '',
                    success = '';
                if(item.status===0){
                    content = '是否上架该商品？';
                    success = '上架成功！';
                }else{
                    content = '是否下架该商品？';
                    success = '下架成功！';
                }
                popup.confirm({
                    content:content,
                    yes:()=>{
                        util.ajax({
                            url:config.baseApi + 'bookMall-admin/api/item/modifyStatus',
                            data:{
                                itemCode:item.itemCode,	//是	string	商品编码
                                status:item.status===0?1:0,	//是	string	状态，0-未上架，1-已上架
                            },
                            success:()=>{
                                popup.miss({
                                    content:success
                                });
                                this.getList();
                            }
                        })
                    }
                })
            },
            deleteItem(item){
                popup.confirm({
                    content:'是否删除该商品？',
                    yes:()=>{
                        util.ajax({
                            url:config.baseApi + 'bookMall-admin/api/item/deleteItem',
                            data:{
                                itemCode:item.itemCode,
                            },
                            success:(data=>{
                                popup.miss({content:'删除成功！'});
                                this.getList();
                            })
                        })
                    }
                })
            }
        },
        
    };
</script>